<template>
  <van-form @submit="login">
    <van-field
      v-model="user.phone"
      name="账号"
      label="账号"
      placeholder="账号"
      :rules="[{ required: true, message: '请填写账号' }]"
    />
    <van-field
      v-model="user.password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="login" @click="login">登录</van-button>
    </div>
  </van-form>
</template>

<script>
// import axios from 'axios'
import Vue from 'vue'
import { Toast } from 'vant';
Vue.use(Toast);

import { reqlogin } from "../../http/http";
export default {
  data() {
    return {
      // 1.初始化表单数据
      user: {
        phone: "",
        password: ""
      }
    };
  },
  methods: {
    // 2.点了登录按钮
    login() {
      // 发请求
      reqlogin(this.user).then(res => {
        // console.log("交互成功");
        console.log(res);
        if (res.data.code === 200) {
          //登录成功
          // ①弹成功
          Toast(res.data.msg);

          // ②存判断是否登录的标识,而且这个标识我们存了用户的信息
          localStorage.setItem("isLogin", JSON.stringify(res.data.list));

          // ③ 跳转到首页
          this.$router.push("/index/home");
        } else {
          //登录失败
          Toast(res.data.msg);
        }
      });
    }
  }
};
</script>
<style scoped>
img {
  width: 200px;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  margin-top: 100px;
}
.loginbox {
  /* position: absolute;
 left: 50%;
 transform: translate(-50%); */
  text-align: center;
  margin-top: 200px;
  /* width: 200px; */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
}
.btn {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
</style>
